import 'package:demo_01/components/20_orderDetail.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:logger/logger.dart';

class MyApp19 extends StatefulWidget {
  const MyApp19({super.key});

  @override
  State<MyApp19> createState() => _MyApp19State();
}

final logger = Logger(
  printer: PrettyPrinter(
    methodCount: 2, // Number of method calls to be displayed
    errorMethodCount: 8, // Number of method calls if stacktrace is provided
    lineLength: 120, // Width of the output
    colors: true, // Colorful log messages
    printEmojis: false, // Print an emoji for each log message
  ),
);

class _MyApp19State extends State<MyApp19> {
  List _orderList = [];

  @override
  void initState() {
    // implement initState
    loadData();
    super.initState();
  }

  loadData() async {
    final dio = Dio();
    Response res = await dio.get('https://mock.boxuegu.com/mock/1172/orders');
    // print(res.data);

    // logger.i(res.data);

    setState(() {
      _orderList = res.data;
    });
  }

  /// 生成订单状态的方法
  String getOrderState(int state) {
    String orderState = '待付款';
    switch (state) {
      case 1:
        orderState = '待付款';
        break;
      case 2:
        orderState = '待发货';
        break;
      case 3:
        orderState = '待收货';
        break;
      case 4:
        orderState = '待评价';
        break;
      default:
        orderState = '其他';
    }

    return orderState;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('dio列表渲染'),
          centerTitle: true,
        ),
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              // 读取当前item需要的每一项数据
              Map orderInfo = _orderList[index];

              return GestureDetector(
                  // 点击事件执行函数
                  onTap: () {
                    logger.i('点击了$index');
                    // TODO 路由跳转方式1：Navigator
                    // Navigator.push(context, MaterialPageRoute(
                    //   builder: (BuildContext context) {
                    //     return orderDetail(id:index);
                    //   },
                    // ));
                    // TODO 路由跳转方式2：命名路由
                    Navigator.pushNamed(context,'/details',arguments: {
                      'id':index
                    });
                  },
                  child: Container(
                    padding: const EdgeInsets.all(10.0),
                    color: Colors.white,
                    child: Column(
                      children: [
                        // 1. 订单创建时间+订单状态
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            // 创建时间
                            Text(
                              orderInfo['createTime'],
                              style: const TextStyle(
                                  color: Color(0xFF666666), fontSize: 13),
                            ),
                            // 状态
                            Text(
                              getOrderState(orderInfo['orderState']),
                              // orderInfo['orderState'],
                              style: const TextStyle(
                                  color: Color(0xFFFF9240), fontSize: 13),
                            ),
                          ],
                        ),
                        // 2. 商品图片+名称+数量+规格+单价
                        Padding(
                          padding: const EdgeInsets.only(top: 10.0),
                          child: Row(
                            children: [
                              // 图片
                              Image.network(
                                orderInfo['image'],
                                width: 86.0,
                                height: 86.0,
                              ),
                              // 名称+数量+规格+单价
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 10.0),
                                  child: Column(
                                    // 保证名称+数量+规格+单价居左对齐
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      // 名称+数量
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          // 名称
                                          Expanded(
                                            child: Text(
                                              orderInfo['name'],
                                              style: const TextStyle(
                                                  color: Color(0xFF262626),
                                                  fontSize: 14),
                                            ),
                                          ),
                                          // 数量
                                          Padding(
                                            padding: const EdgeInsets.only(
                                                left: 10.0),
                                            child: Text(
                                              'x ${orderInfo['totalNum']}',
                                              style: const TextStyle(
                                                  color: Color(0xFF262626),
                                                  fontSize: 14),
                                            ),
                                          ),
                                        ],
                                      ),
                                      // 规格
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(top: 6.0),
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: const Color(0xFFF1F1F1),
                                            borderRadius:
                                                BorderRadius.circular(2.0),
                                          ),
                                          padding: const EdgeInsets.symmetric(
                                              vertical: 3, horizontal: 5),
                                          child: Text(
                                            orderInfo['attrsText'],
                                            style: const TextStyle(
                                                color: Color(0xFF888888),
                                                fontSize: 12.0),
                                          ),
                                        ),
                                      ),
                                      // 单价
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(top: 6.0),
                                        child: Text(
                                          '¥${orderInfo['curPrice']}',
                                          style: const TextStyle(
                                              color: Color(0xFF262626),
                                              fontSize: 14.0),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        // 3. 合计
                        Padding(
                          padding: const EdgeInsets.only(top: 10.0),
                          child: Container(
                            alignment: Alignment.centerRight,
                            child: Text(
                              '合计：¥${orderInfo['curPrice'] * orderInfo['totalNum']}',
                              style: const TextStyle(
                                  color: Color(0xFF262626), fontSize: 14.0),
                            ),
                          ),
                        ),
                        // 4. 再次购买
                        Padding(
                          padding: const EdgeInsets.only(top: 10.0),
                          child: Container(
                            alignment: Alignment.centerRight,
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(
                                    color: const Color(0xFF666666), width: 0.5),
                                borderRadius: BorderRadius.circular(2.0),
                              ),
                              padding: const EdgeInsets.symmetric(
                                  vertical: 4, horizontal: 8),
                              child: const Text(
                                '再次购买',
                                style: TextStyle(
                                    color: Color(0xFF666666), fontSize: 14.0),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ));
            },
            separatorBuilder: (BuildContext context, int index) {
              return Container(height: 8.0, color: const Color(0xFFF7F7F8));
            },
            itemCount: _orderList.length),
      );
  }
}
